<!--
	统计数量显示组件
	Created by Penglei on 2023/08/09
-->
<template>
	<div class="visits-count">
		<h3 class="visits-count-title" v-html="props.title || ''"></h3>
		<div class="visits-count-number">
			<div class="visits-count-number-item" v-for="i in (props.num + '').length" :key="i">
				{{ (props.num + '').slice(i-1, i) }}
			</div>
		</div>
	</div>
</template>

<script setup name="VisitsCount">
const props = defineProps({
	// 标题
	title: {
		required: true,
		type: String,
		default: '',
	},
	// 显示数
	num: {
		required: true,
		type: [String, Number],
		default: '',
	},
});
</script>

<style lang="scss" scoped>
.visits-count {
	margin-bottom: 20px;
	width: 187px;
	height: 64px;
	background: url('@/assets/images/anbao/bg_num.png') no-repeat center;
	background-size: 100% 100%;

	&-title {
		font-size: 14px;
		color: #46FFFF;
		margin: 0;
		margin-top: 10px;
		padding-left: 10px;
	}

	&-number {
		height: 35px;
		line-height: 35px;
		font-size: 30px;
		color: #46FFFF;
		margin: 0;
		margin-right: 11px;
		text-align: center;
		display: flex;
		justify-content: flex-end;

		&-item {
			width: 24px;
			height: 100%;
		}
		&-item:not(:first-child) {
			margin-left: 4.5px;
		}
	}
}
</style>